<template>
  <div class="z_tree">
      <ul id="tree" class="ztree" style="overflow:auto;"></ul>
  </div>
</template>

<script>
import $ from "jquery";
import "@/components/z-tree/zTreeService.js";
export default {
  props: ["ztreeData", "nodeChange","config","beforeExpand",'async'],
  data() {
    return {
      data: "",
      nodeId: ""
    };
  },
  methods:{
    addNodes(node,newNode){
        var treeObj = $.fn.zTree.getZTreeObj('tree');
        newNode = treeObj.addNodes(node, newNode);
    },
    editNodes(){

    },
    removeNodes(node){
      var treeObj = $.fn.zTree.getZTreeObj("tree");
      treeObj.removeNode(node)
    },
    refresh(node){

    }
  },
  mounted() {
    /*
    ztree的配置信息config
      id : 'id',
      pid:"pId",
      name:'name',
      idIcon:"",
<<<<<<< HEAD
      pidIcon:""
=======
      pidIcon:""
>>>>>>> 7277ef5b4636a920e5f7f6058a76ad58133f57ba
    */
    let that = this;
    var zTree;
    var demoIframe;
    var t;
    var setting = {

      view: {
        dblClickExpand: false,
        showLine: true,
        selectedMulti: false
      },
      async:this.async,
      data: {
        simpleData: {
          enable: true,
          idKey: that.config.id,
          pIdKey: that.config.pid,
          rootPId: ""
        },
        key:{
          name:this.config.name,
          idIcon:this.config.idIcon,
          pidIcon:this.config.pidIcon,
          companyIcon:this.config.companyIcon,
          deptIcon:this.config.deptIcon,
          personIcon:this.config.personIcon,
          isCompany:this.config.isCompany
        }
      },
      callback: {
        beforeClick: function(treeId, treeNode) {
          if (that.nodeId == treeNode[that.config.id]) {
            return;
          }
          t.expandNode(treeNode, true);
          that.nodeId = treeNode[that.config.id];
          that.nodeChange(treeNode);
          // console.log(treeId);
        },
        beforeExpand(treeId,treeNode){
        },
        onAsyncSuccess(){
        }
      }
    };

    $(document).ready(function() {
      t = $("#tree");
      if(that.async && that.async.enable){
        t = $.fn.zTree.init(t, setting);
      }else{
        t = $.fn.zTree.init(t, setting,that.ztreeData);
      }
    });
  }
};
</script>

<style lang="scss">
@import "./zTreeStyle.scss";
</style>
